<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改软件')" />
    <th:block th:include="include :: bootstrap-fileinput-css"/>
    <th:block th:include="include :: select2-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-software-edit" th:object="${software}">
            <input name="id" th:field="*{id}" type="hidden">
            <input id="projectName" name="projectName" th:field="*{projectName}" type="hidden">
            <input id="projectNo" name="projectNo" th:field="*{projectNo}" type="hidden">
            <input id="projectType" name="projectType" th:field="*{projectType}" type="hidden">
            <input id="md5" class="md5" name="md5" th:field="*{md5}" type="hidden">
            <input id="fileSize" class="fileSize" name="fileSize" th:field="*{fileSize}" type="hidden">
            <div class="form-group">
                <label class="col-sm-3 control-label">项目名称：</label>
                <div class="col-sm-8">
                    <select id="projectId" name="projectId" class="form-control m-b" th:with="projectList=${projectList}" >
                        <option th:each="project : ${projectList}" th:text="${project.projectName}" th:value="${project.id}"
                                th:field="*{projectId}" th:attr="data-project-id=${project.id}, data-project-name=${project.projectName}, data-project-no=${project.projectNo}, data-project-type=${project.projectType}"></option>
                    </select>
                </div>
            </div>
<!--            <div class="form-group">    -->
<!--                <label class="col-sm-3 control-label">设备名称：</label>-->
<!--                <div class="col-sm-8">-->
<!--                    <input name="machineName" th:field="*{machineName}" class="form-control" type="text">-->
<!--                </div>-->
<!--            </div>-->
            <div class="form-group">    
                <label class="col-sm-3 control-label">设备型号：</label>
                <div class="col-sm-8">
                    <input name="machineModel" th:field="*{machineModel}" class="form-control" type="text" >
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">更新包：</label>
                <div class="col-sm-8">
                    <input class="updateFile_" type="hidden" name="updateFile" th:field="*{updateFile}">
                    <div class="file-loading">
                        <input class="form-control file-upload" id="updateFile" name="file" type="file" >
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">软件名称：</label>
                <div class="col-sm-8">
                    <input name="softwareName" th:field="*{softwareName}" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">软件类型：</label>
                <div class="col-sm-8">
                    <select name="softwareModel" class="form-control m-b" th:with="type=${@dict.getType('lh_machine_type')}" >
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{softwareModel}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">软件版本：</label>
                <div class="col-sm-8">
                    <select name="softwareVersion" class="select2-multiple form-control m-b" data-none-selected-text="请选择" th:with="type=${@dict.getType('lh_software_version')}">
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{softwareVersion}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">支持更新版本：</label>
                <div class="col-sm-8">
                    <select name="supportVersion" class="select2-multiple form-control m-b" data-none-selected-text="请选择" multiple th:with="type=${@dict.getType('lh_software_version')}">
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:attr="selected=${software.supportVersion != null && software.supportVersion.contains(dict.dictValue)?true:false}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">支持硬件版本：</label>
                <div class="col-sm-8">
                    <select name="supportHardwareVersion" class="select2-multiple form-control m-b" data-none-selected-text="请选择" multiple  th:with="type=${@dict.getType('lh_hardware_version')}">
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:attr="selected=${software.supportHardwareVersion != null && software.supportHardwareVersion.contains(dict.dictValue)?true:false}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">更新策略：</label>
                <div class="col-sm-8">
                    <select  name="updateStrategy" class="form-control m-b" th:with="type=${@dict.getType('lh_software_strategy')}" onchange="stragegyChange(this)">
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{updateStrategy}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group releaseArea" th:attr="style=${software.updateStrategy != null && software.updateStrategy == '1'?'':'display: none;'}">
                <label class="col-sm-3 control-label">区域：</label>
                <div class="col-sm-8">
                    <select id="releaseArea" name="releaseArea" class="select2-multiple form-control m-b" data-none-selected-text="请选择" multiple th:with="type=${@dict.getType('lh_machine_area')}">
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:attr="selected=${software.releaseArea != null && software.releaseArea.contains(dict.dictValue)?true:false}"></option>
                    </select>
                </div>
            </div>

            <div class="form-group SN" th:attr="style=${software.updateStrategy != null && software.updateStrategy == '2'?'':'display: none;'}">
                <label class="col-sm-3 control-label">限定设备：</label>
                <div class="col-sm-8">
                    <div class="input-group">
                        <input id="ableSn" name="ableSn" class="form-control" type="text" data-type="able" th:field="*{ableSn}" readonly onclick="selectUsersToParentCallBack(this)">
                        <div class="input-group-btn">
                            <a tabindex="-1" class="btn btn-white" type="button" onclick="clearSN('able')">清除</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-group SN" th:attr="style=${software.updateStrategy != null && software.updateStrategy == '2'?'':'display: none;'}">
                <label class="col-sm-3 control-label">禁止限定设备：</label>
                <div class="col-sm-8">
                    <div class="input-group">
                        <input id="disableSn" name="disableSn" class="form-control" type="text" data-type="disabled" th:field="*{disabledSn}" readonly onclick="selectUsersToParentCallBack(this)">
                        <div class="input-group-btn">
                            <a tabindex="-1" class="btn btn-white" type="button" onclick="clearSN('disabled')">清除</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">更新内容描述：</label>
                <div class="col-sm-8">
                    <textarea  name="updateDes" class="form-control">[[*{updateDes}]]</textarea>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">状态：</label>
                <div class="col-sm-8">
                    <select  name="status" class="form-control m-b" th:with="type=${@dict.getType('lh_software_status')}">
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{status}"></option>
                    </select>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: bootstrap-fileinput-js"/>
    <th:block th:include="include :: select2-js" />
    <script th:inline="javascript">
        var prefix = ctx + "lh/software";
        var abledUpdateSoftware = [[${software.ableSn}]];
        var disabledSoftware = [[${software.disabledSn}]];
        var checkedValues = '';
        $("#form-software-edit").validate({
            focusCleanup: true
        });

        function submitHandler() {
            var updateStrategy = $("[name='updateStrategy']").val();
            if(updateStrategy == '0') {
                $("[name='releaseArea']").val('').trigger('change');
                $("[name='disableSn']").val('');
                $("[name='ableSn']").val('');
            } else if(updateStrategy == '1') {
                $("[name='disableSn']").val('');
                $("[name='ableSn']").val('');
            } else if(updateStrategy == '2') {
                $("[name='releaseArea']").val('').trigger('change');
            }
            if(!$('.updateFile_').val()) {
                $.modal.msg("文件不能为空!");
                return;
            }
            if ($.validate.form()) {
                $.operate.save(prefix + "/edit", $('#form-software-edit').serialize());
            }
        }

        $(".file-upload").each(function (i) {
            var val = $("input[name='" + this.id + "']").val()
            $(this).fileinput({
                'uploadUrl': ctx + 'common/upload',
                initialPreviewAsData: true,
                initialPreview: [val],
                maxFileCount: 1,
                autoReplace: true
            }).on('fileuploaded', function (event, data, previewId, index) {
                $("input[name='" + event.currentTarget.id + "']").val(data.response.fileName);
                $(".md5").val(data.response.md5);
                $(".fileSize").val(data.response.fileSize);
            }).on('fileremoved', function (event, id, index) {
                $("input[name='" + event.currentTarget.id + "']").val('');
                $(".md5").val('');
                $(".fileSize").val('');
            })
            $(this).fileinput('_initFileActions');
        });
        $('#projectId').on('change', function(){
            var thisValue = $(this).val();
            $('#projectId > option').each(function(index, element) {
                if(thisValue == $(element).attr('value')) {
                    $('#projectNo').val($(element).attr('data-project-no'));
                    $('#projectType').val($(element).attr('data-project-type'));
                    $('#projectName').val($(element).attr('data-project-name'));

                }
            });
        });

        function stragegyChange(obj) {
            let val = $(obj).val();
            if(val == '0') {
                $('.releaseArea').hide();
                $('.SN').hide();
                $("#releaseArea").val('').trigger('change');
                $("#disableSn").val('');
                $("#ableSn").val('');
            } else if(val == '1') {
                $('.releaseArea').show();
                $('.SN').hide();
                $("#disableSn").val('');
                $("#ableSn").val('');
            } else {
                $('.SN').show();
                $('.releaseArea').hide();
                $("#releaseArea").val('').trigger('change');

            }
        }

        // callBack获取父窗口方法（方式二）
        function selectUsersToParentCallBack(obj){
            var type = $(obj).attr('data-type');
            var val = $(obj).val();
            console.log(abledUpdateSoftware);
            console.log(disabledSoftware);
            console.log(type);
            var options = {
                title: '选择设备',
                url: prefix + "/parent?type=" + type + "&abledUpdateSoftware=" + abledUpdateSoftware + "&disabledSoftware=" + disabledSoftware + "&checkedValues=" + val,
                callBack: function (index, layero) {
                    var rows = layero.find("iframe")[0].contentWindow.getSelections();
                    if (rows.length == 0) {
                        $.modal.alertWarning("请至少选择一条记录");
                        return;
                    }
                    setVal(type, rows);
                    $.modal.close(index);
                }
            };
            $.modal.openOptions(options);
        }
        function setVal(type, rows) {
            if(type == 'able') {
                let ableArr = rows.map((obj, index) => {
                    return obj.sn;
                });

                let disableArr = disabledSoftware.split(',');
                disableArr = resArr(disableArr, ableArr);
                abledUpdateSoftware = ableArr.join(",");
                disabledSoftware = disableArr.join(",");
                $('#ableSn').val(abledUpdateSoftware);
                $('#disableSn').val(disabledSoftware);
            } else {
                let disableArr = rows.map((obj, index) => {
                    return obj.sn;
                });
                let ableArr = abledUpdateSoftware.split(',');
                ableArr = resArr(ableArr, disableArr);
                disabledSoftware = disableArr.join(",");
                abledUpdateSoftware = ableArr.join(",");
                $('#ableSn').val(abledUpdateSoftware);
                $('#disableSn').val(disabledSoftware);
            }
        }

        function clearSN(type) {
            if(type == 'able') {
                abledUpdateSoftware = '';
                $('#ableSn').val('');
            } else {
                disabledSoftware = '';
                $('#disableSn').val('');

            }
        }

        function resArr(arr1, arr2) {
            return arr1.filter((v) => arr2.every((val) => val!= v));
        }
    </script>
</body>
</html>